import React, { Component } from "react";
import { Table, Button, Divider, message } from "antd";
import { observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import service from "./RoleListService";

const columns = [
  {
    title: "角色名",
    dataIndex: "roleName"
  },
  {
    title: "角色编码",
    dataIndex: "roleCode"
  },
  {
    title: "Action",
    key: "action",
    render: (text: string, record: any) => (
      <span>
        <Button
          onClick={() => {
            console.log("关联权限");
          }}
          icon="eye"
        >
          关联权限
        </Button>
        <Divider type="vertical" />
        <Button type="danger" icon="delete">
          删除角色
        </Button>
      </span>
    )
  }
];

@observer
class RoleListTable extends Component {
  @observable data = [];
  @observable loading = true;

  componentDidMount() {
    service.listAll().then((res: any) => {
      if (res.status === 0) {
        runInAction(() => (this.data = res.data));
      } else {
        message.error(res.msg);
      }
      runInAction(() => {
        this.loading = false;
      });
    });
  }

  render() {
    return (
      <div className="table-content">
        <Table
          dataSource={this.data}
          columns={columns}
          rowKey="id"
          loading={this.loading}
        />
      </div>
    );
  }
}

export default RoleListTable;
